import React, { useState, useEffect, useRef } from "react";
import { Form, Button, Input, Affix, Select, message, Space, Switch, Drawer, Row, Col } from "antd";
import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import cmdbres from "@/data/cmdbres";
import request, {requestIAM} from '@/utils/request';
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const { uniqueIdentificationRegexp } = regexpUtil;
const user = hcpUtils.getUser();
const CreateTag = ({ history, visible, setVisible, onCreateFinish, info }) => {
	const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
		if(info) {
            form.setFieldsValue({
                ...info,
                status: info.status == 1 && 'checked'
            });
		}
	}, [info]);

	const onFinish = async (fieldsValue) => {
        console.log(fieldsValue);
        setLoading(true);
        let url = cmdbres.createTag;
        let param = Object.assign({}, 
            fieldsValue, 
            {author: user.staffName},
            {status: (fieldsValue.status || fieldsValue.status  == 'checked') ? 0 : 1}
        );
        let tip = "";
        if(info) {//修改
            url = cmdbres.updateTag(info.id);
            param['id']  = info.id;
            tip = "修改";
        }

		let res = await request({
			...url,
			data: param
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success(`${tip}标签成功！`);
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		}
	};

    const handleClose = () => {
        setVisible(false);
    }

    return (
        <Drawer 
            className="drawer-table-columns create-field"
            title={info ? '修改标签' :'新建标签'}
            placement={'right'}
            width={600}
            onClose={handleClose}
            visible={visible}
            footer={null}
        >
            <Form
                className="hcp-drawer-form"
                form={form}
                labelCol={{ span: 5}}
                wrapperCol={{ span: 17 }}
                name="basic"
                onFinish={onFinish}
            >
                <Form.Item 
                    label="标签名称" 
                    name="tagName" 
                    rules={[{required: true,message: '请输入名称'}]}
                >
                    <Input placeholder="请输入名称" maxLength={64} />
                </Form.Item>
                <Form.Item 
                    label="唯一标识"
                    name="tagCode"
                    rules={[
                        {
                            required: true,
                            message: '唯一标识不能为空',
                        },
                        uniqueIdentificationRegexp(256),
                    ]}
                    extra={
                        <p style={{ color: "#999999" }}>
                            请填写以字母开头，数字、字母、下划线，横线的组合
                        </p>
                    }
                    style={{ marginBottom: 5 }}
                    >
                    <Input placeholder="请输入唯一标识" maxLength={256} disabled={info}/>
                </Form.Item>
                <Form.Item
                    label="是否启用"
                    name="status"
                    required
                    initialValue={true}
                    valuePropName="checked"
                >
                    <Switch
                        checkedChildren="启用"
                        unCheckedChildren="停用"
                    />
                </Form.Item>
                <div className="modal-body-footer">
                    <Space>
                        <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
                        <Button onClick={handleClose}>取消</Button>
                    </Space>
                </div>
            </Form>
        </Drawer>
    );
};

export default CreateTag;
